<template>
    <div v-if="topicHeader && Object.keys(topicHeader).length > 0">
        <h1 class="pirze-title">
            #{{topicHeader.title}}#
        </h1>
        <div class="displayFlex justifyCtBwt time-rule-wrap">
            <span>
                <span class="act-time" v-if="topicHeader.actState == 1 || topicHeader.actState == -1 || topicHeader.actState == -2">
                    {{changeTime1(topicHeader.rewardRule.startTime,{nowDate:topicHeader.rewardRule.sysTime})}}开始
                </span>
                <span class="act-time" v-else-if="topicHeader.actState == 0">
                    {{changeTime1(topicHeader.rewardRule.endTime,{nowDate:topicHeader.rewardRule.sysTime})}}结束
                </span>
                <span class="act-time disabled" v-else-if="topicHeader.actState == 2 && !topicHeader.awarded">
                    活动已结束
                </span>
                <span class="act-time" v-if="topicHeader.actState == 2 && topicHeader.awarded">
                    中奖啦
                </span>
                <!--下载好看好玩赢大奖-->
            </span>
            <span class="rule-btn" @click="$emit('ruleShow')">
                规则
                <img class="rule-icon" src="../../../../assets/images/prizeTopic/rule_icon.png" alt="">
            </span>
        </div>
        <div class="store-box">
            <div class="displayFlex flex-algin-center">
                <img class="store-logo" :src="topicHeader.logo" alt="">
                <span class="store-name">{{topicHeader.storeName}}</span>
                <span class="store-do">发起本话题</span>
            </div>
            <!--<div class="store-wtext positionR" :class="{'three-line-ellepsis':!showAllText}">-->
                <!--{{topicHeader.content}}-->
                <!--<img v-if="getChartLength(topicHeader.content).chartLength > 140" @click="showAllText=!showAllText" class="more-text" src="../../../../assets/images/prizeTopic/open_icon.png" alt="">-->
            <!--</div>-->
            <lines-ellipse :linesEllipsisProp="linesEllipsis"></lines-ellipse>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Header",
        props:{
            topicHeaderProp:Object,
        },
        data(){
            return{
                showMoreText:false,
                showAllText:false,
                topicHeader:{
                    // title:''
                },
                linesEllipsis:{},
            }
        },
        mounted(){
            this.topicHeader = Object.assign({},this.topicHeader,this.topicHeaderProp);
            this.linesEllipsis = {
                line:3,
                content:this.topicHeader.content,
                words:144,
                img:'',
            }
        },
        methods:{

        },
        components:{
            'lines-ellipse': () => import('../../../../components/commonComponents/linesEllipsis/LinesEllipsis'),
        },
        watch:{
            topicHeaderProp(val){
                this.topicHeader = Object.assign({},this.topicHeader,val);
            }
        }
    }
</script>

<style scoped>
    .pirze-title{
        color: #313233;
        font-size: .2rem;
        padding-bottom: .12rem;
    }
    .act-time{
        background-color: rgba(248,237,122,.4);
        font-size: .12rem;
        color: #905C1D;
        padding: .04rem .08rem;
        border-radius: .25rem;
    }
    .disabled.act-time{
        background-color: rgba(235,238,122,.4);
        color: #EBEEF5;
    }
    .rule-btn{
        font-size: .12rem;
        color: #C4C6CC;
    }
    .store-logo{
        width: .2rem;
        height:.2rem;
        border-radius: .04rem;
    }
    .store-name{
        font-size: .14rem;
        color: #3E69A5;
        padding-left: .05rem;
    }
    .store-do{
        font-size: .14rem;
        color: #939599;
        padding-left: .05rem;
    }
    /*.more-text{*/
        /*width: .135rem;*/
        /*position: absolute;*/
        /*right: 0;*/
        /*bottom: 0;*/
    /*}*/
    .rule-icon{
        width: .12rem;
        vertical-align: text-top;
    }
    .time-rule-wrap{
        padding-bottom: .22rem;
    }
    .store-wtext{
        padding-top: .08rem;
        color: #999;
        font-size: .14rem;
    }
</style>